<template>
  <div class="article-container">
    <!-- 卡片组件 -->
    <el-card class="box-card filter-card">
      <div slot="header" class="clearfix">
        <!-- 头部面包屑导航组件 -->
          <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb-nav">
            <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> -->
            <!-- <el-breadcrumb-item to="/">首页</el-breadcrumb-item> 三种写法-->
            <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>内容管理</el-breadcrumb-item>
          </el-breadcrumb>
      </div>
          <!-- 表单组件 -->
      <el-form ref="form" :model="form" label-width="60px" size="small">
        <el-form-item label="状态">
          <!-- el-radio默认把label作为文本选择的值
           -->
          <el-radio-group v-model="status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道">
          <el-select v-model="channeId" placeholder="请选择活动区域">
            <el-option label="全部" :value="null"></el-option>
            <el-option :label="item.name" :value="item.id" v-for="(item, index) in channelData" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="rangeDate"
            type="datetimerange"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['12:00:00']">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :disabled="loading" @click="loadArticles(1)">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
          根据筛选条件共查询到{{totalCount}}条结果：
      </div>
      <!-- 文章信息表格 -->
          <el-table
          :data="article"
          v-loading="loading"
          style="width: 100%"
          class="list-table"
          row-key="id"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column
            prop="date"
            label="封面">
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 60px"
                :src="scope.row.cover.images[0]"
                fit="fit" lazy>
                <!-- Image组件的占位内容 -->
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
               <!--另一种方法： <img v-if="scope.row.cover.images[0]"
               :src="scope.row.cover.images[0]" alt="" class="article-cover">
               <img v-else src="./error.gif" alt="" class="article-cover"> -->
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态">
            <!-- 如果要在自定义列模板中获取当前遍历数据，那么就在template上声明 slot-scope -->
            <template slot-scope="scope">
              <!-- <el-tag>草稿{{ scope.$index }}</el-tag> -->
              <el-tag type="info" v-if="scope.row.status === 0">草稿</el-tag>
              <el-tag v-else-if="scope.row.status === 1">待审核</el-tag>
              <el-tag type="success" v-else-if="scope.row.status === 2">审核通过</el-tag>
              <el-tag type="warning" v-else-if="scope.row.status === 3">审核失败</el-tag>
              <el-tag type="danger" v-else-if="scope.row.status === 4">已删除</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="pubdate"
            label="发布时间">
          </el-table-column>
          <el-table-column
            prop="date"
            label="操作">
            <!-- 操作列的自定义列模板 中prop是没有用的-->
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)" type="primary"  icon="el-icon-edit" circle></el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
      <!-- 分页组件 -->
      <el-pagination
        background
        @current-change="onCurrentChange"
        layout="prev, pager, next"
        :page-size="pageSize"
        :disabled="loading"
        :total="totalCount">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getArticles, getArticleChannel } from '@/api/article'
  export default {
    name: 'ArticleIndex',
    // 找到数据接口
    // 封装请求方法
    // 在组件中初始调用获取数据
    // 把数据绑定到模板中
    // ******************************************************************************
    // 数据渲染表格列表
    // 1.把需要展示的数组列表数据绑定给 tabl组件的data属性 注意：不用v-for遍历，它自己会遍历
    // 2.设计表格列 el-table-column
    // 3.width设置列宽
    // 4.label设列的标题
    // 5.prop指定渲染列表项字段
    data () {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          desc: ''
        },
        tableData1: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          hasChildren: true
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        article: [], // 存文章数据列表
        totalCount: [], // 文章总条数
        pageSize: 10, // 每页大小
        status: null, // 查询文章的默认状态,不传就是全部
        channelData: [], // 存频道下拉数据
        channeId: null, // 下拉筛选
        rangeDate: null, // 日期筛选
        loading: true // 文章表单加载数据时的loading
      }
    },
    methods: {
      loadArticles (page = 1) {
        // 请求文章列表前，开启loading效果
        this.loading = true
        getArticles({
          page: page,
          per_page: this.pageSize,
          status: this.status,
          channel_id: this.channeId,
          begin_pubdate: this.rangeDate ? this.rangeDate[0] : null,
          end_pubdate: this.rangeDate ? this.rangeDate[1] : null
        }).then(res => {
          // console.log(res)
          // this.article = res.data.data.results
          const { results, total_count: totalCount } = res.data.data
          this.article = results
          this.totalCount = totalCount
          // 请求文章列表完后，关闭loading效果
          this.loading = false
        })
      },
      // 分页功能
      onCurrentChange (page) {
        // console.log(page)
        this.loadArticles(page)
      },
      // 获取文章频道下拉数据
      loadArticleChannel () {
        getArticleChannel().then(res => {
          console.log(res)
          this.channelData = res.data.data.channels
        })
      }
    },
    created () {
      this.loadArticles()
      this.loadArticleChannel()
    }
  }
</script>

<style scoped>
.breadcrumb-nav{
  margin-bottom: 30px;
}

.filter-card,.list-table{
  margin-bottom: 30px;
}

.article-cover{
  width: 100px;
  background-size: cover;
}
</style>
